<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%-- 
    JSP Name : storybook.jsp
    Description : 스토리북을 보여준다.
    author jkKim
    since 2012. 5. 10.
    version 1.0
    Modification Information
       since          author              description
    ===========    =============    ===========================
    2012. 5. 10.     jkKim     최초 생성
--%>
<%@ include file="/WEB-INF/jsp/com/include/declare.jspf" %>
<%@ include file="/WEB-INF/jsp/com/include/doctype.jspf" %>
    <meta name="WT.ti" content="홈_차종_<c:out value='${dspMgmtVO.dspNm}'/>_storybook">
    <script type="text/javascript" src="/kr/common/js/showroom.js"></script>
    <script type="text/javascript" src="/kr/common/js/storybook/jquery.isotope.min.js"></script>
    <script type="text/javascript" src="${snsHttpDomain}/sns/story?type=json&search=${dspMgmtVO.dspNmEn}"></script>
    <script type="text/javascript" src="/kr/common/js/showroom2.js"></script>
    <script type="text/javascript" src="/kr/common/js/swfobject.js"></script>
    <script>
    function showChaildView(id, seq){
        if($.trim($("#"+id).html()).length != 0){
            return;
        }   
        $.ajax({
            type: "POST",
            dataType : "text",
            url: "<c:url value='/childView.do'/>",
            data: {
                'dspCtgrSn' : seq
            },
            success: function(data){
                if(data){
                    $("#"+id).html('');   
                    $("#"+id).append(data);
                }  
            }
         });        
    } 
    function showroomPrint(o) {
        var Parea = $(o).parent().parent().parent().parent().attr('id');
        $('#'+Parea).printArea({mode: 'popup', popupClose: false});
  
        return false;
    }
    
    var carImgArray=[];
    function vrCar(carPath, imgframe, ext){  
        if(!imgframe){
            imgframe=1;
        }
       for(var i=1; i<=60; i=i+imgframe) {
           var imgPath = i+"";
           if(imgPath.length == 1){
               imgPath = "0000"+imgPath;
           }else if(imgPath.length == 2){
               imgPath = "000"+imgPath;
           }else if(imgPath.length == 3){
               imgPath = "00"+imgPath;
           }else if(imgPath.length == 4){
               imgPath = "0"+imgPath;
           }
           imgPath+=ext;
           carImgArray.push(imgPath);
       }
        $('#vr-car').reel({
            cw:false,
            frame:1,
            speed:0,
            path:carPath,
            images:carImgArray
        });
    }
    
    function vrPathChange(o, path){
        $('a.vr-path-change').parent().each(function(idx){
            $(this).attr('_idx',idx);
        });
        $('.jquery-reel').eq($(o).parent().attr('_idx')).data('Toverlay').fnchg(path);
    }
    function addVr(){
        var copyId = $('.vr-car-rotate2-wraper').length; //eq
        if(copyId>1){return false;}
        var copyImgSrc = $('.vr-car-rotate2-wraper').eq(copyId-1).find('.vr-car-place img').attr('src');
        $('<div class="vr-car-rotate2-wraper"><div class="vr-car-rotate2"><div class="vr-car-place"><div id="vr-car-reel'+copyId+'"><img id="vr-car'+copyId+'" src="/kr'+copyImgSrc+'" width="880" height="445" /></div></div></div>').appendTo($('.vr-add-place'));
        $('.colone-control').eq(0).clone().appendTo($('.vr-car-rotate2-wraper').eq(copyId));
        $('#vr-car'+copyId).reel({
            cw:false,
            frame:1,
            speed:0,
            path:carPath,
            images:carImgArray
        }); 
    }
   
// 랜덤 함수 셋팅 및 전역 변수
var blogNum = [[1,2,2],[2,1,2],[2,2,1]];
var facebookNum = [[1,1,1,1,1]];
//var facebookNum = [[1,1,1]];
//var twitterNum = [[3]]; 
var twitterNum = [[3,2],[2,3]];
var youtubeNum = [[1,1,1]];
var global_content = [];

$(document).ready(function() {
    $("#snml").find(".snml_description").html($('#showroom_description').val());
    $("#snml").find(".snml_URL").html(location.href);
    if(ssl_sns_data){
        var ABOUT_HYUNDAI = ssl_sns_data ["ABOUT_HYUNDAI"]; 
        setSns(ABOUT_HYUNDAI,"sns-contents");
        var container = $('#sns-contents');
            container.isotope({
                masonry: {
                    columnWidth: 55 
                }
        });
    }
    $('#showroom-container').showroomContentscontrol();

    


});

window.onload = function(){
    var list = $(".media-area .circle")
    list.each(function(index){
        if(index==0){
            eval($(this).attr("onclick"));
        }
    });
}
//컨텐트 종류별 랜덤 셋팅값중 하나를 가져온다.
function pushContentNum(arr,contentType,id){
    var tagetArr=[];
    if(contentType == "blog"){
        tagetArr=blogNum;
    }else if(contentType == "facebook"){
        tagetArr=facebookNum;
    }else if(contentType == "twitter"){
        tagetArr=twitterNum;
    }else if(contentType == "youtube"){
        tagetArr=youtubeNum;
    }
    
    var num = getRanDom(tagetArr.length);
    pushContent(arr, tagetArr[num], contentType,id);
}
//초기화
function init(){
    global_content = [];
}
//가져온 컨텐츠중에서  랜덤으로 객체를 뽑아낸다.
function pushContent(arr, arrNum,contentType, id){
    var maxlength = arr.length;
    var templength = 0;
    for(var i=0; i<arrNum.length; i++){
        var tempObj = {};
        tempObj['contentType'] = contentType;
        tempObj['id'] = id;
        var tempArr = [];
        templength = arrNum[i];
        if(maxlength > templength){
            for(var j=0; j<templength; j++){
                tempArr.push(arr.pop());
                maxlength--;
            }
            tempObj.arr = tempArr;
            global_content.push(tempObj);
        }else{
            
            for(var j=0; j<arr.length; j++){
                tempArr.push(arr.pop());
            }
            if(tempArr.length>0){
                tempObj.arr = tempArr;
                global_content.push(tempObj);
            }
        }
        templength =0;
    }
    
}
//sns를 셋팅한다.
function setSns(sns,id){
    init();
    var snsJoin = ['blog','facebook','twitter','youtube'];
    var temp = 0;
    for(var i=0; i<snsJoin.length; i++){
        try{
        if(sns[snsJoin[i]]){
            //FisherYates(sns[snsJoin[i]]);
            pushContentNum(sns[snsJoin[i]],snsJoin[i],id);
        }
        }catch(err){}
    }
    setContent();
}
//배열내에 값을 랜덤으로 섞는다.
function FisherYates(A){
    if(A.length){
        var i=A.length;
        var temp;
        while(1<=--i){
            var j=Math.floor(Math.random()*(i+1));
            var tmp=A[j];
            A[j]=A[i];
            A[i]=tmp;
        }
    }
}
//랜덤 숫자를 만들어 리턴한다.
function getRanDom(count){
    var num = Math.floor(Math.random()*count);
    return num;
}
//컨텐츠를 셋팅한다.
function setContent(){
    FisherYates(global_content);
    for(var i=0; i<global_content.length; i++){
        if(global_content[i].arr.length == 0){
            continue;
        }
        setContentHtml(global_content[i].contentType, global_content[i].arr, global_content[i].id);
    }
}
//실제 컨텐츠 값을 HTML로 만들어 화면에 뿌린다.
function setContentHtml(contentType, arr, id){
        var Html = '';
        if(contentType == "blog"){
            Html+='<div class="area">';
            Html+='<div class="blog-wrap">';
            for(var i=0; i<arr.length; i++){
                Html+='<div class="cell">';
                if(arr[i].image){
                    Html+='<img src="'+arr[i].image+'" alt="관련 이미지" class="thumb" />';
                }
                if(arr[i].title){
                    Html+='<p class="title"><a href="javascript:openPopup(\''+arr[i].link+'\')">'+arr[i].title+'</a></p>';
                }
                if(arr[i].description){
                    Html+='<p class="text"><a href="javascript:openPopup(\''+arr[i].link+'\')">'+arr[i].description+'</a></p>';
                }
                if(arr[i].category && arr[i].pubDate){
                    Html+='<p class="information">'+arr[i].category+' | '+arr[i].pubDate+'</p>';
                }
                Html+='</div>';
            }
            Html+='<p class="sources"><a href="javascript:openPopup(\'http://blog.hyundai.com/\')"><img src="/kr/images/showroom/icon_sns_blog.gif" alt="link BLOG" /></a></p>';
            Html+='</div>';
            Html+='</div>';
        }else if(contentType == "twitter"){
            Html+='<div class="area">';
            Html+='<div class="twitter-wrap"><ul>';
            for(var i=0; i<arr.length; i++){
                var tempHtml = '';
                if(arr[i].image){
                    Html+='<img src="'+arr[i].image+'" alt="관련 이미지" class="thumb" />';
                }
                if(arr[i].title){
                    Html+='<p class="title">'+arr[i].title+'</p>';
                }
                if(arr[i].con){
                    Html+='<li>';
                    Html+='<dl class="twitter-content">';
                    Html+='<dt>'+id+'</dt>';
                    Html+='<dd><a href="javascript:openPopup(\''+arr[i].link+'\')">'+arr[i].con+'</a></dd>';
                    Html+='</dl>';
                    Html+='<p class="information">'+arr[i].pubDate+'</p>';
                    Html+='</li>';
                }
                
            }
            var link=""
            if(id == "ABOUT_HYUNDAI"){
                link="http://twitter.com/#!/about_hyundai";
            }else if(id == "YOUNG_HYUNDAI"){
                link="http://twitter.com/#!/younghyundai";
            }else if(id == "blue_members"){
                link="http://twitter.com/#!/blueNthink";
            }else if(id == "HYUNDAI_RECRUIT"){
                link="http://twitter.com/#!/hyundaijob";                
            }
            if(link == ""){
                Html+='<p class="sources"><img src="/kr/images/showroom/icon_sns_twitter.gif" alt="Join the conversation TWITTER" /></p>';
            }else{
                Html+='<p class="sources"><a href="javascript:openPopup(\''+link+'\')"><img src="/kr/images/showroom/icon_sns_twitter.gif" alt="Join the conversation TWITTER" /></a></p>';
            }
            Html+='</ul></div>';
            Html+='</div>';
        }else if(contentType == "youtube"){
            Html+='<div class="area">';
            Html+='<div class="youtube-wrap">';
            for(var i=0; i<arr.length; i++){
                if(arr[i].thumbURL){
                    Html+='<img src="'+arr[i].thumbURL+'" alt="관련 이미지" class="thumb" />';
                }
                if(arr[i].title){
                    Html+='<p class="title"><a href="javascript:openPopup(\''+arr[i].URL+'\')">'+arr[i].title+'</a></p>';
                }
                if(arr[i].con){
                    Html+='<p class="text"><a href="javascript:openPopup(\''+arr[i].URL+'\')">'+arr[i].con+'</a></p>';
                }

                if(arr[i].pubDate){
                    Html+='<p class="information">'+arr[i].pubDate+'</p>';
                }
                if(arr[i].hit){
                    Html+='<p class="hit">HIT : '+arr[i].hit+'</p>';
                }
            }
            Html+='<p class="sources"><a href="javascript:openPopup(\'http://www.youtube.com/abouthyundai\')"><img src="/kr/images/showroom/icon_sns_youtube.gif" alt="link YOUTUBE" /></a></p>';
            Html+='</div>';
            Html+='</div>';
        }else if(contentType == "facebook"){
            Html+='<div class="area">';
            Html+='<div class="facebook-wrap">';
            for(var i=0; i<arr.length; i++){
                Html+='<div class="cell">';
                if(arr[i].picture){
                    Html+='<img src="'+arr[i].picture+'" alt="관련 이미지" class="thumb" />';
                }
                Html+='<dl class="facebook-content">';

                if(arr[i].message){
                    Html+='<dd><a href="javascript:openPopup(\''+arr[i].link+'\')">'+arr[i].message+'</a></dd>';
                }
                Html+='</dl>';
                Html+='<p class="information">'+arr[i].pubDate+'</p>';
                Html+='</div>';
            }
            if(id == "ABOUT_HYUNDAI"){
                link="http://www.facebook.com/AboutHyundai";
            }else if(id == "YOUNG_HYUNDAI"){
                link="http://www.facebook.com/younghyundai";
            }else if(id == "blue_members"){
                link="http://www.facebook.com/blumembers";
            }else if(id == "HYUNDAI_RECRUIT"){
                link="http://www.facebook.com/hyundaijob";                
            }else if(id == "WORLDWIDE"){
                link="http://www.facebook.com/Hyundaiworldwide";  
            } 
            if(link == ""){
                Html+='<p class="sources"><img src="/kr/images/showroom/icon_sns_facebook.gif" alt="Join the conversation TWITTER" /></p>';
            }else{
                Html+='<p class="sources"><a href="javascript:openPopup(\''+link+'\')"><img src="/kr/images/showroom/icon_sns_facebook.gif" alt="Join the conversation TWITTER" /></a></p>';
            }
            Html+='</div>';
            Html+='</div>';
        }
        $("#"+id).append($(Html));

}

function thisMovie(movieName) {
     if (navigator.appName.indexOf("Microsoft") != -1) {
         return window[movieName];
     } else {
         return document[movieName];
     }
 } 

function startVideo()
{
    thisMovie("hplayerContent").startVideoPopup();
}
 function closePlayerPopup()
 {
    alert('close')
 }

function circleChange(o,url){
    var list = $(".media-area .circle")
    list.each(function(){
        $(this).removeClass("circle-on");
    });
    $(o).addClass("circle-on");
    thisMovie("hplayerContent").startVideoPopup(url);
    
}
</script>
</head>
<c:if test="${dspMgmtVO.cotnLnSttg == '1'}">
    <body id="typeB" style="background:url('<c:url value="${dspMgmtVO.lwpSurrImgPath}"/>') repeat;">
</c:if>
<c:if test="${dspMgmtVO.cotnLnSttg != '1'}">
    <body id="typeA" style="background:url('<c:url value="${dspMgmtVO.lwpSurrImgPath}"/>') repeat;">
</c:if>
<div id="wrap" class="showroom-wrap">
    <c:if test="${dspMgmtVO.surrSttg == '1'}">
        <%@ include file="/WEB-INF/jsp/com/include/navi_utill.jspf" %>
    </c:if>
    <c:if test="${dspMgmtVO.surrSttg == '2'}">
        <%@ include file="/WEB-INF/jsp/com/include/navi_utill_sub.jspf" %>
    </c:if>
    <%@ include file="/WEB-INF/jsp/com/include/navi_header.jspf" %>
    
    <hr />

    <!-- visual 관리영역 -->
    ${mnSbc}
    <!-- //visual 관리영역 -->
    <hr />
    <div id="snml" style="display:none">
      <div class="snml_comment">userTxt</div>
      <div class="snml_title">${dspMgmtVO.dspNm}을(를)%nick님이 좋아 합니다.</div>
      <div class="snml_URL"></div>
      <div class="snml_img">${httpDomain }<c:url value="${dspMgmtVO.carImgPath}"/></div>
      <div class="snml_caption"></div>
      <div class="snml_description"></div>
    </div>
    <input type="hidden" id="car_name" name="car_name" value="${dspMgmtVO.dspNm}" />
    <input type="hidden" id="car_name_eng" name="car_name_eng" value="${dspMgmtVO.dspNmEn}" />
    <input type="hidden" id="car_code" name="car_code" value="${dspMgmtVO.carCd1}${dspMgmtVO.carCd2}" />
    <input type="hidden" id="pagePosion" name="pagePosion" value="${pagePosion}" />
    <input type="hidden" id="carCd1" name="carCd1" value="${dspMgmtVO.carCd1}" />
    <input type="hidden" id="carCd2" name="carCd2" value="${dspMgmtVO.carCd2}" />
    <div id="showroom-container">
        <!-- showroom-navigation -->
        <div id="showroom-navigation-wrap">
            <c:if test="${dspMgmtVO.cotnLnSttg == '2' && dspMgmtVO.fSurrImgPath != null && dspMgmtVO.fSurrImgPath != ''}">
                <div id="showroom-navigation" style="background:url('<c:url value="${dspMgmtVO.fSurrImgPath}"/>') repeat-x;"> 
            </c:if>
            <c:if test="${dspMgmtVO.cotnLnSttg == '1' || dspMgmtVO.fSurrImgPath == null || dspMgmtVO.fSurrImgPath == ''}">
                <div id="showroom-navigation">
            </c:if>
                <div class="showroom-navigation-inner" style="background:url('<c:url value="${dspMgmtVO.ctrSurrImgPath}"/>') repeat-x;">
                    <div class="carbrand-area">
                        <h2><a href="#"><img src="<c:url value="${dspMgmtVO.carImgPath}"/>" alt="${dspMgmtVO.dspNm}" /></a></h2>
                        <ul class="carbrand-menu">
                            <li class="favorite">
                                <c:if test="${userInfo.mbrSn == null}">
                                    <script type="text/javascript" charset="utf-8" src="${snsHttpDomain}/sns/pub?type=1&pageCode=${menuCode }&js=1&imgURL=<c:url value="${dspMgmtVO.rcmImgPath}"/>&uKey="></script>
                                </c:if>
                                <c:if test="${userInfo.mbrSn != null}">
                                    <script type="text/javascript" charset="utf-8" src="${snsHttpDomain}/sns/pub?type=1&pageCode=${menuCode }&js=1&imgURL=<c:url value="${dspMgmtVO.rcmImgPath}"/>&uKey=${fnc:encryptCb(userInfo.mbrSn) }"></script>
                                </c:if>
                            </li>
                            <c:if test="${dspMgmtVO.virExprExpsYn == 'Y'}">
                                <li><a href="javascript:virExprExps('${dspMgmtVO.virExprPath}')"><img src="/kr/images/showroom/menu_carbrand01.png" alt="가상체험" /></a></li>
                            </c:if>
                            <c:if test="${dspMgmtVO.brndStyExpsYn == 'Y'}">
                                <li><a href="javascript:storybook('<c:url value="/storybook.do"/>')"><img src="/kr/images/showroom/menu_carbrand02.png" alt="스토리 북" /></a></li>
                            </c:if>
                            <c:if test="${dspMgmtVO.tuixExpsYn == 'Y'}">
                                <li><a href="javascript:tuix('<c:url value="/tuix.do"/>')"><img src="/kr/images/showroom/menu_carbrand03.png" alt="TUIX" /></a></li>
                            </c:if>
                            <c:if test="${dspMgmtVO.ncapExpsYn == 'Y'}">
                                <li><a href="javascript:kncap('<c:url value="/kncap.do"/>')"><img src="/kr/images/showroom/menu_carbrand04.png" alt="KNCAP" /></a></li>
                            </c:if>
                        </ul>
                    </div>
                    <ul class="carspec-area">
                        <c:forEach var="result" items="${dspCtgrVOList}" varStatus="status">
                            <li><a href="javascript:showroomLink('/kr/showroom.do', '#showroom-cont-${result.dspCtgrSn}')"><img src="/kr${result.menuImgPath}" alt="${result.dspMenuNm}" /></a></li>
                        </c:forEach>
                    </ul>
                    <%@ include file="/WEB-INF/jsp/com/include/quickmenu.jspf" %>
                </div>
            </div>
        </div>
        
        <div class="showroom-storybook-wrap">
            <div class="showroom-storybook">
                ${brndDspMgmtVO.tsrdSbcInp}
                <script type="text/javascript">
                $('.showroom-storybook').storyControl();
                </script>
            </div>
            <script type="text/javascript" charset="utf-8" src="${snsHttpDomain}/sns/pub?type=9&pageCode=${menuCode }&js=1&imgURL=<c:url value="${dspMgmtVO.rcmImgPath}"/>&uKey=${fnc:encryptCb(userInfo.mbrSn) }"></script>
            <div class="storybook-sns"><div class="sns-inner">
                <img src="/kr/images/showroom/img_storybook_sns_top.gif" alt="About Hyundai 새로운 생각은 어떤 생각일까? 새로운 생각은 생각보다 가까이에 있다." />
                <div id="sns-contents">
                    
                </div>
            </div></div>
            <c:if test="${fn:length(list1) > 0 || fn:length(list2) > 0}">
            <div class="storybook-multimedia"><div class="storybook-multimedia-inner">
                <h3><img src="/kr/images/showroom/h3_multimedia.gif" alt="MULTIMEDIA" /></h3>
                <p class="m-desc"><img src="/kr/images/showroom/h3_multimedia_desc.gif" alt="i40, 유럽의 감성을 만나다. 월페이퍼와 스크린세이버로 유럽의 감성을 간직하세요." /></p>
                <c:if test="${fn:length(list1) > 0}">
                <h4 class="subsection">
                </h4>
                <div class="media-area">
                    <div class="btn-area">
                        <c:forEach var="vo" items="${list1}" varStatus="status">
                            <button class="circle <c:if test="${status.first}">circle-on</c:if>" onclick="circleChange(this,'${vo.dtlSbcpath}')"></button>
                        </c:forEach>
                    </div>
                    <div>
                        <div id="hplayerContent">
                        </div>
                        <script type="text/javascript">
                            //videoURL:    videoURL
    
                            var flashVars = {}
                            var param = { wmode: "transparent" }
                            swfobject.embedSWF("/kr/common/hyundai_player.swf", "hplayerContent", "646", "452", "10.0", null, flashVars, param, { name: "hplayerContent" });
                        </script> 
                    </div>
                </div>
                </c:if>
                <c:if test="${fn:length(list2) > 0}">
                <h4 class="subsection"><img src="/kr/images/showroom/h4_wallpaper.gif" alt="WALLPAPER" /></h4>
                <ul class="wallpaper-list">
                    <c:forEach var="vo" items="${list2}" varStatus="status">
                    <li>
                        <img src="<c:url value='${vo.thumnImgPath}'/>" alt="월페이퍼이미지" class="thumb" />
                        <div class="downcontrol">
                            <img src="/kr/images/showroom/download_wallpaper.gif" alt="down" />
                            <a href="/kr/file/download.do?filSn=${vo.imgFilSn}"><img src="/kr/images/showroom/download_wallpaper02.gif" alt="1024x768" /></a>
                            <a href="/kr/file/download.do?filSn=${vo.imgFilSn2}"><img src="/kr/images/showroom/download_wallpaper03.gif" alt="1280x960" /></a>
                        </div>
                    </li>
                    </c:forEach>
                </ul>
                </c:if>
            </div></div> 
            </c:if>
            
        </div>
    </div>
    <hr />
    <%@ include file="/WEB-INF/jsp/com/include/footer.jspf" %>